<template>
  <el-container>
      <!--左侧-->
      <el-aside>
        <el-form-item>
          <img src="../assets/xueshneg.svg">
        </el-form-item>

      </el-aside>

      <!--右侧-->
      <el-main>
        <h1>中小学信息管理系统</h1>
        <el-form ref="loginRefForm" :model="user" style="max-width: 450px" :rules="loginUserRules">
          <h4>欢 迎 登 录</h4>
          <!--账号-->
          <el-form-item label="账号" prop="loginAct">
            <el-input v-model="user.loginAct"/>
          </el-form-item>

          <!--密码-->
          <el-form-item label="密码" prop="loginPwd">
            <el-input type="password" v-model="user.loginPwd" />
          </el-form-item>

          <!--登录按钮-->
          <el-form-item>
            <el-button type="success" @click="login">登 录</el-button>
          </el-form-item>

          <!--下次登录-->
          <el-form-item>
            <el-checkbox label="下次自动登录" v-model="user.rememberMe"/>
          </el-form-item>
        </el-form>
      </el-main>
  </el-container>
</template>

<script>
import {doGet, doPost} from "../http/httpRequest.js";
import {getTokenName, messageTip, removeToken} from "../utils/util.js";

export default {
  name : "LoginView",
  data(){
    return {
      user: {},

      // 表单验证
      loginUserRules: {
        loginAct: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        loginPwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 15, message: '密码个数为5-15个', trigger: 'blur' },
          { pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])[a-zA-Z0-9]+$/, message: '密码必须由数字和字母组成', trigger: 'blur' },
        ]
      }
    }
  },

  mounted() {
    this.freeLogin();
  },

  methods: {
    // 用户登录
    login(){
      // 验证输入框的合法性
      this.$refs.loginRefForm.validate((isValid)=>{
        // 如果验证合法
        if (isValid){
          // 封装需要传入后端的数据
          let formData = new FormData();
          formData.append('loginAct',this.user.loginAct)
          formData.append('loginPwd',this.user.loginPwd)
          formData.append('rememberMe',this.user.rememberMe)

          doPost('/api/login',formData).then((resp)=>{
            if (resp.data.code===200){
              messageTip("登录成功","success")

              // 登录成功后删除历史Token
              removeToken();

              // 前端存储JWT
              if (this.user.rememberMe===true){
                window.localStorage.setItem(getTokenName(),resp.data.data)
              }else {
                window.sessionStorage.setItem(getTokenName(),resp.data.data)
              }
              window.location.href='/dashboard'
            }else {
              messageTip('登录失败，用户名或密码错误','error')
            }
          })
        }
      })
    },

    // 免登录
    freeLogin(){
      let token = window.localStorage.getItem(getTokenName());

      if (token){
        doGet('/api/login/free',{}).then((resp)=>{
          if (resp.data.code===200){
            window.location.href='/dashboard'
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.el-aside {
  width: 40%;
  background-color: #409EFF;
}
.el-main {
  height: calc(100vh);
}
img {
  height: 600px;
  display: block;
  margin-top: 50px;
  margin-left: 50px;
}
h1 {
  text-align: center;
  font-size: 45px;
  color: #409EFF;
  padding-bottom: 100px;
}
.el-form {
  margin: auto;
}
h4 {
  color: #409EFF;
  text-align: center;
  font-size: 15px;
}
.el-button {
  width: 89%;
  margin-left: 50px;
}
.el-checkbox {
  margin-left: 50px;
}
</style>
